<template>
    <div class="user-pwd">
        <!-- 头部 -->
        <div class="pwd-header">
            <h3>重置密码</h3>
        </div>
        <!-- 内容 -->
        <div class="pwd-container">
            <el-form :model="pwdInfo" :rules="pwdRules" ref="pwdForm">
                <el-row>
                    <el-col :span="12">
                            <el-form-item label-width="120px" prop="old_pwd">
                                <template slot="label">
                                    <span>原密码</span>
                                </template>
                                <el-input class="infoIpt" placeholder="请输入原密码" v-model="pwdInfo.old_pwd"></el-input>
                            </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                            <el-form-item label-width="120px" prop="new_pwd">
                                <template slot="label">
                                    <span>新密码</span>
                                </template>
                                <el-input class="infoIpt" placeholder="请输入新密码"  v-model="pwdInfo.new_pwd"></el-input>
                            </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                            <el-form-item label-width="120px" prop="re_pwd">
                                <template slot="label">
                                    <span>确认新密码</span>
                                </template>
                                <el-input class="infoIpt" placeholder="请再次输入新密码" v-model="pwdInfo.re_pwd"></el-input>
                            </el-form-item>
                    </el-col>
                </el-row>
                 <!-- 按钮 -->
                 <el-row type="flex">
                    <el-col :span="12"  style="margin-left: 120px;">
                            <el-form-item >
                                <el-button type="primary" @click="updatePsd">修改密码</el-button>
                                <el-button @click="resetForm">重置</el-button>
                            </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
    </div>
</template>
<script>
import { updatePsd } from '@/api/user'
export default {
  // data
  data () {
    // 自定义规则
    const checkRepwd = (rule, value, callback) => {
      if (value !== this.pwdInfo.new_pwd) {
        callback(new Error('二次密码输入不一样'))
      } else {
        return callback()
      }
    }
    return {
      pwdInfo: {
        old_pwd: '',
        new_pwd: '',
        re_pwd: ''
      },
      pwdRules: {
        old_pwd: [{ required: true, message: '请输入旧密码', trigger: 'blur' },
          { min: 6, max: 15, message: '密码长度在6~15个字符之内', trigger: 'blur' }],
        new_pwd: [{ required: true, message: '请输入新密码', trigger: 'blur' },
          { min: 6, max: 15, message: '密码长度在6~15个字符之内', trigger: 'blur' }],
        re_pwd: [{ required: true, message: '请再次确认新密码', trigger: 'blur' },
          { validator: checkRepwd, trigger: 'blur' }]
      }
    }
  },
  // methods
  methods: {
    // 修改密码的方法
    updatePsd () {
      // 校验
      this.$refs.pwdForm.validate(async (isOk) => {
        if (isOk) {
          await updatePsd(this.pwdInfo)
          this.$message.success('修改密码成功')
        }
      })
    },
    resetForm () {
      this.$refs.pwdForm.resetFields()
    }
  }
}
</script>
<style lang="less" scoped>
    .user-pwd{
        padding: 30px;
        width: 100%;
        height: 100%;
        .pwd-header{
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0px 30px;

            height: 70px;
            background: #FFFFFF;
            border-radius: 4px 4px 0px 0px;
        }
        .pwd-container{
            padding: 0px 30px;
            background-color: #FFFFFF;
            span{
                font-size: 16px;
            }
            .infoIpt{
                width: 400px;
            }
        }
    }
</style>
